<template>
	<view v-if="sojson" class="content fofa poRel">
		<tabnav title="发起合同" :col="back"></tabnav>
		<view style="height: 40rpx;"></view>
		<view class="textCen foSi35 fowe600">{{sojson.templateName}}</view>
		<view class="wid90 mar bacFFF borRad20 box1 mar-top30" style="">
			<view style="height: 20rpx;"></view>
			<view class="wid90 mar ">
				<view class="dis disAl foSi25">
					<view class="dis disAl disJuC coFFF borRad10" style="width: 100rpx;height: 40rpx;" :style="'background-color: '+back+';'">发起方</view>
					<view class="mar-left20">{{sojson.recipients[0].isPromoter?sojson.recipients[0].roleName:sojson.recipients[1].roleName}}</view>
				</view>
				 <!-- :style="switchTr?'background-color: '+back+';':''" -->
				<view v-if="sojson.recipients.length > 1" class="foSi25 mar-top20 borRad10">
					<view class="dis disAl disJuB">
						<view class="dis disAl">
							<view class="dis disAl foSi25">
								<view class="dis disAl disJuC coFFF borRad10" style="width: 100rpx;height: 40rpx;" :style="'background-color: '+back+';'">签署方</view>
								<view v-if="!(switchTr && replenish)" class="mar-left20">{{sojson.recipients[0].isPromoter?sojson.recipients[1].roleName:sojson.recipients[0].roleName}}</view>
							</view>
							<view v-if="!switchTr" class="mar-left20">待对方填写</view>
							<view v-if="switchTr && replenish" class="mar-left20">{{replenish.approveName}}</view>
						</view>
						<!-- <switch @change="switch1Change" :color="back" style="transform:scale(0.6)"/> -->
					</view>
					<view v-if="switchTr" @click="tiaozhuan('/pages/template/replenish?replenish='+JSON.stringify(replenish))" 
					class="hei60 dis disAl wid90 mar" :style="'color: '+back+';'">点击补充签署方信息</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
		<view v-if="sojson.components.length > 0" class="wid90 mar bacFFF borRad20 box1 mar-top30" style="padding: 10rpx 0;">
			<block v-for="(item,index) in sojson.components" :key="index">
				<form-input :type="item.componentType" :value="item.componentValue" :title="item.componentName" 
					:index="index" @indexInput='indexInput' component="components"></form-input>
				<view v-if="index+1 != sojson.components.length" class="xia"></view>
			</block>
		</view>
		<view v-if="sojson.signComponents.length > 0" class="wid90 mar bacFFF borRad20 box1 mar-top30" style="padding: 10rpx 0;">
			<block v-for="(item,index) in sojson.signComponents" :key="index"
			v-if="item.componentType != 'SIGN_SEAL' && item.componentType != 'SIGN_SIGNATURE'	
			&& item.componentType != 'SIGN_PAGING_SEAL' && item.componentType != 'ATTACHMENT' " >
				<form-input :type="item.componentType" :value="item.componentValue" :title="item.componentName" 
					:index="index" @indexInput='indexInput' component="signComponents"></form-input>
				<view v-if="index+1 != sojson.signComponents.length" class="xia"></view>
			</block>
		</view>
		<view style="height: 220rpx;" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"></view>
		<view class="wid100 dis disAl disJuC poFix bacFFF box1" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}" style="height: 120rpx;bottom: 0;z-index: 999;">
			<view class="dis disAl disJuC coFFF hei80 foSi35 borRad10" @click="tijiao"
			:style="'background-color: '+back+';'" style="width: 400rpx;">提交</view>
		</view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	import formInput from "../common/formInput/formInput.vue"
	export default {
		components: {
			tabnav,
			formInput
		},
		data() {
			return {
				paddingBottomHeight: 0,
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				sojson: '',
				switchTr: true,
				replenish: '',
				caogaoId: ''
			}
		},
		onLoad(option) {
			if(option.caogao == 1){
				this.sojson = uni.getStorageSync('contract_detail').sojson
				this.replenish = uni.getStorageSync('contract_detail').replenish
			}else{
				this.sojson = uni.getStorageSync('contract_detail')
			}
			console.log(this.sojson)
			var that = this
			uni.$on('replenish',function(data){
				console.log('监听到事件来自 updateData ，携带参数为：' + data);
				that.replenish = data
				that.appletCreat()
			})
		},
		created() {
			var that = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					that.tops = e.statusBarHeight
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if(e.model.indexOf(item) != -1 && e.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			})
		},
		methods: {
			appletCreat(){
				var that = this
				var content = {
					sojson: that.sojson,
					replenish: that.replenish
				}
				uni.request({
					url: that.global.url+'api/qianyu_dzq/applet_drafts_creat_data',
					method: 'POST',
					header:{'site-id':that.global.site_id,'token': uni.getStorageSync('inuse_userinfo_token')},
					data: {
						content: JSON.stringify(content),
						id: that.caogaoId,
						type: 1
					},
					success(res) {
					    let result = res.data
						console.log(result);
					    if(result.code == 1){
							that.caogaoId = result.data.id
						}else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					}
				})
			},
			switch1Change: function (e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				this.switchTr = e.detail.value
			},
			tiaozhuan(url){
				uni.navigateTo({
					url: url
				});
			},
			indexInput(value,index,component){
				console.log(value)
				console.log(index)
				if(component == 'components'){
					console.log(this.sojson.components[index])
					this.sojson.components[index].componentValue = value
				}else{
					console.log(this.sojson.signComponents[index])
					this.sojson.signComponents[index].componentValue = value
				}
				if(this.caogaoId){
					this.appletCreat()
				}
			},
			tijiao(){
				uni.showLoading({
					title:'加载中...'
				})
				var components = []
				for (var i=0; i<this.sojson.components.length; i++) {
					if(this.sojson.components[i].componentRequired){
						if(!this.sojson.components[i].componentValue){
							uni.showToast({
							    title: this.sojson.components[i].componentName+'不能为空',
							    icon:'none',
								duration: 2000
							})
							return
						}
					}
					components.push({
						componentId: this.sojson.components[i].componentId,
						componentValue: this.sojson.components[i].componentValue
					})
				}
				for (var i=0; i<this.sojson.signComponents.length; i++) {
					if(this.sojson.signComponents[i].componentType != 'SIGN_SEAL' && 
					this.sojson.signComponents[i].componentType != 'SIGN_SIGNATURE'	&& 
					this.sojson.signComponents[i].componentType != 'SIGN_PAGING_SEAL' && 
					this.sojson.signComponents[i].componentType != 'ATTACHMENT'){
						if(this.sojson.signComponents[i].componentRequired){
							if(!this.sojson.signComponents[i].componentValue){
								uni.showToast({
								    title: this.sojson.signComponents[i].componentName+'不能为空',
								    icon:'none',
									duration: 2000
								})
								return
							}
						}
						components.push({
							componentId: this.sojson.signComponents[i].componentId,
							componentValue: this.sojson.signComponents[i].componentValue
						})
					}
				}
				console.log(components)
				let that = this
				var replenish = []
				for(var i=0; i<that.sojson.recipients.length; i++){
					if(!that.sojson.recipients[i].isPromoter){
						replenish.push({
							isPromoter: that.sojson.recipients[i].isPromoter,
							recipientId: that.sojson.recipients[i].recipientId,
							recipientType: that.sojson.recipients[i].recipientType,
							roleName: that.sojson.recipients[i].roleName,
							routingOrder: that.sojson.recipients[i].routingOrder,
							signType: that.sojson.recipients[i].signType,
							approveName: that.replenish.approveName,
							idCardType: that.replenish.idCardType,
							idCardNumber: that.replenish.idCardNumber,
							phoneNumber: that.replenish.phoneNumber,
							organizationName: that.replenish.orgName,
							approverType: that.sojson.recipients[i].recipientType == 'INDIVIDUAL'?'PERSON':'ORGANIZATION'
						})
					}else{
						replenish.push({
							isPromoter: that.sojson.recipients[i].isPromoter,
							recipientId: that.sojson.recipients[i].recipientId,
							recipientType: that.sojson.recipients[i].recipientType,
							roleName: that.sojson.recipients[i].roleName,
							routingOrder: that.sojson.recipients[i].routingOrder,
							signType: that.sojson.recipients[i].signType,
							approveName: '',
							idCardType: '',
							idCardNumber: '',
							phoneNumber: '',
							organizationName: '',
							approverType:  ''
						})
					}
				}
				console.log(replenish)
				uni.request({
					url: that.global.url+'api/qianyu_dzq/applet_template_contract',
					method: 'POST',
					header:{'site-id':that.global.site_id,'token': uni.getStorageSync('inuse_userinfo_token')},
					data: {
						templateId: that.sojson.templateId,
						flowName: that.sojson.templateName,
						deadline: that.sojson.templateVersion,
						flowDescription: that.sojson.description,
						components: JSON.stringify(components),
						flowApproverInfo: JSON.stringify(replenish),
						autoCancel: false
					},
					success(res) {
					    let result = res.data
						uni.hideLoading()
						console.log(result);
					    if(result.code == 1){
							var data = result.data
							if(data.code == 0){
								// that.goNativeindex(data.data.signUrlInfos[0].signUrl)
								uni.setStorageSync('flowId', data.data.signUrlInfos[0].flowId)
								uni.reLaunch({
									url: '/pages/template/supplement'
								});
							}else{
							    uni.showToast({
							        title: data.msg,
							        icon:'none',
									duration: 2000
							    })
							}
					    }else{
					        uni.showToast({
					            title: result.msg,
					            icon:'none',
								duration: 2000
					        })
					    }
					},
					complete() {
						// uni.hideLoading()
					}
				})
			},
			goNativeindex(path){
			    uni.openEmbeddedMiniProgram({
			        appId: 'wxa023b292fd19d41d',// 此为 appid
			        path: path,// 此为路径
			        envVersion:"release",
			        success: res => {
			             // 打开成功
			             console.log("打开成功", res);
			        },
			        fail: err => {
			             console.log(err);
			        }
			    })
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
	}
	.xia{
		height: 1rpx;
		background: #BBBBBB;
	}
</style>
